<template>
	<view class="orderDetail">
		<view class="header" v-if="!isPay">
			<view class="state">{{ countDown>0 ? '等待付款':'订单超时关闭'}}</view>
			<!-- 一般用法 -->
			<view><uni-countdown :show-day="false"  :minute="countDown" :second="0"></uni-countdown> 订单超时后自动关闭</view>
		</view>
		<view class="content">
			<view class="state">收货信息</view>
			<view>
				<view>收货地点：{{intable.address}} </view>
				<view>收货人： {{intable.user}}  {{intable.phone}} </view>
			</view>
		</view>
		<view style="padding-left: 40rpx;">
			合计:<text class="endPrice">￥ 99.9</text>
		</view>
		<view class="displayData">
			<view class="state">商品详情</view>
			<view v-for="(item,index) in shopData" class="shopItem">
				<view class="shopItemImg">
					<image :src="item.imgUrl" style="width: 200rpx;height: 200rpx;"></image>
				</view>
				<view class="shopItemContent">
					<view>{{item.name}}</view>
					<view>单价： {{item.price}}</view>
					<view>数量： {{item.count}}</view>
				</view>
			</view>
		</view>
		<view class="endTool" v-if="!isPay&&countDown>0">
			<view class="giveup" @click="giveup()">
				取消订单
			</view>
			<view class="payTo" @click="payType()">
				结算
			</view>
			<uni-popup ref="popup">
				<view class="changePay">
						<button @click="payTo('weixin')">微信支付</button>
						<button @click="payTo('local')">到店自取</button>
				</view>
			</uni-popup>
		</view>
		<view class="endTool" style="background-color: #66ccff;width: 80%;" v-if="isPay">
			<view class="orderContent" v-if="!isLocal">
				<view>
					支付号: {{payCode}}
				</view>
				<view > 
					已支付: {{pay}} ¥
				</view>
				<view style="text-align: right;" > 
					<text style="color: #ff0b23;" @click="giveup()">我要退款</text>
				</view>
			</view>
			<view class="orderContent" v-if="isLocal">
				<view>
					到店支付 {{pay}} ¥ 
				</view>
				<view>
					(到店支付退款请到线下门店)
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import order from '@/common/api/order/order.js';
	import orderUtils from '@/common/api/order/order.js'
	import pay from '@/common/api/pay/pay.js';
	export default {
		data() {
			return {
				shopId:'', //订单id
				countDown:0, //倒计时
				shopData:[], //订单详情
				isPay:true, //是否已经支付
				isLocal:false, //支付方式选择
				intable:{ //收货信息
					'phone':'',
					'user':'',
					'address':''
				},
				pay:'',
				payCode:'',
			}
		},
		onLoad:function(options){
			this.shopId = options.id;
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				//检查订单是否支付
				orderUtils.getOrderInfo(this.shopId)
					.then(res=>{
						console.log(res)
						//收货人信息
						this.intable.address = res.data.data.address;
						this.intable.phone = res.data.data.phone;
						this.intable.user = res.data.data.userName;
						this.shopData = res.data.orderDetails;
						this.payCode = res.data.data.payCode;
						this.pay = res.data.data.pay;
						//订单未支付
						if(!res.data.data.payIs){
							//获取当前时间戳
							var timestamp = Date.parse(new Date());
							timestamp = timestamp/1000 - res.data.createTime/1000;
							this.isPay = false;
							//检查订单倒计时 30分钟
							this.getIsExist(parseInt(timestamp));
						}
					})
			},
			getIsExist(time){
				this.countDown=30 - time/60;
			},
			payType(){
				this.$refs.popup.open('top');
			},
			payTo(change){
				switch(change){
					case 'weixin':
						uni.redirectTo({
							url:'/pages/orderDetail/orderDetail'
						})
						uni.showToast({
									title:'支付成功',
								 })
						break;
					case 'local':
						uni.showToast({
									title:'到店付款',
								 })
						var intable = this.intable.user +" "+this.intable.phone+" "+this.intable.address
						var data = '{"orderId":"'+this.shopId+'","intable":"'+intable+'"}';
						console.log(data);
						pay.uselocalPay(JSON.parse(data))
							.then(res=>{
								uni.redirectTo({
									url:'/pages/order/order'
								})
							})
							break;
					case 'out':
						uni.showToast({
									title:'已退款',
								 })
							break;
				}
			},
			giveup(){
				//取消订单
				orderUtils.giveUpOrderByUser(this.shopId)
					.then(res=>{
						uni.showToast({
							title: '已取消订单'
						})
						uni.redirectTo({
							url:'/pages/order/order'
						})
					})
			}
		}
	}
</script>

<style>
.orderDetail{
	padding-left: 20rpx;
}
.header{
	padding-left: 40rpx;
	width: 100%;
	height: 100rpx;
	padding-bottom: 80rpx;
}
.state{
	font-weight: bold;
	font-size: 46rpx;
}
.content{
	padding-left: 40rpx;
	height: 200rpx;
	width: 100%;
}
.endTool{
	background-color:(255,255,255,0.5);
	height: 10%;
	bottom: 0rpx;
	width: 100%;
	position: fixed;
}

.endPrice{
	padding-left:10rpx;
	font-size: 46rpx;
	font-weight: bold;
	color: #282828;
}
.payTo{
	float: right;
	width: 30%;
	height: 80rpx;
	background-color: #d30003;
	color: #ececec;
	text-align: center;
	line-height: 80rpx;
	border-radius: 100rpx;
}
.giveup{
	margin-left: -50rpx;
	float: left;
	width: 30%;
	height: 80rpx;
	background-color: #ced3c9;
	color: #ffffff;
	text-align: center;
	line-height: 80rpx;
	border-radius: 100rpx;
}
.displayData{
	padding-left: 40rpx;
	height: 200rpx;
	width: 100%;
}
.shopItem{
	display: flex;
	justify-content: space-between;
}
.shopItemImg{
	width: 30%;
}
.shopItemContent{
	width: 60%;
	padding-top: 20rpx;
}
.changePay{
	margin-top: 50%;
}
.changePay button{
	margin-top: 10%;
	width: 80%;
	height: 200rpx;
	line-height: 200rpx;
	justify-content: center;
	background-color: #66ccff;
	color: white;
},
.orderContent{
	padding-left: 20rpx;
	display: flex;
	flex-direction: column;
}
.orderContent view{
	width: 100%;
	height: 30rpx;
	margin-bottom: 10rpx;
}
</style>
